<#escape x as x?html>
<form class="form-horizontal form-fusion" name="recordForm" id="recordForm" method="post" action="${actionType!}">
    <div class="form-group">
        <label class="col-sm-3 control-label" for="applications">相关应用</label>
        <div class="col-sm-9">
            <input type="text" class="hide"
                   name="applications">
            <div class="application-tree fancytree-form"></div>
        </div>
    </div>
</form>
<script>
    context.call([
        "core",
        "jQueryFancyTree"
    ], function (core) {
        $(".application-tree").fancytree({
            checkbox: true,
            selectMode: 3,
            minExpandLevel: 3,
            source: {
                url: "/sys/appView/get${type}Tree",
                debugDelay: 100
            },
            icon: function (event, data) {
                if (core.isEmpty(data.node.children)) {
                    return "fa fa-cog";
                } else {
                    return "fa fa-cogs";
                }
            },
            select: function (event, data) {
                var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
                    if (node.children) {
                        return null;
                    } else {
                        return node.key;
                    }
                });

                $("input[name='applications']").val(selKeys);
            }
        });
    })
</script>
<style>
    .application-tree .ui-fancytree {
        height: 300px;
        overflow: auto;
    }
</style>
</#escape>